<!--
 * @Author: pgz285 1272160626@qq.com
 * @Date: 2022-09-07 19:32:56
 * @LastEditors: pgz285 1272160626@qq.com
 * @LastEditTime: 2022-09-08 09:54:42
 * @FilePath: /element-admin/src/components/Menu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main">
    <!-- <el-menu router :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen"
        @close="handleClose" :collapse="!showMore" background-color="#323A52" text-color="#B5C4D0"
        active-text-color="#fff">
        <el-submenu index="/">
            <template slot="title"><i class="el-icon-menu"></i>
                <span slot="title">系统管理</span>
            </template>
            <el-menu-item v-for="( item, index ) in navList" :key="index" :index="item.name">
                {{ item.navItem }}
            </el-menu-item>
        </el-submenu>
    </el-menu> -->
    <el-menu :default-active="activeNav" class="el-menu" ref="menu" @select="handleSelect"
             background-color="rgb(32, 34, 42)" text-color="#fff" active-text-color="#ffd04b" >
      <el-submenu index="/home">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span>主页</span>
        </template>
        <el-menu-item index="/home">主页</el-menu-item>
      </el-submenu>
      <div v-for="menu in menuList" :key="menu.title">
        <div v-if="menu.children.length > 0">
          <el-submenu :index="menu.index">
            <template slot="title">
              <i :class="menu.icon"></i>
              <span v-text="menu.title"></span>
            </template>
            <div v-for="secondaryMenu in menu.children" :key="secondaryMenu.title">
              <div v-if="secondaryMenu.children.length === 0">
                <el-menu-item :key="secondaryMenu.title" v-text="secondaryMenu.title"></el-menu-item>
              </div>
              <div v-else>
                <el-submenu :index="secondaryMenu.index">
                  <template slot="title">
                    <span v-text="secondaryMenu.title"></span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item v-for="thirdaryMenu in secondaryMenu.children"
                                  :key="thirdaryMenu.title" :index="thirdaryMenu.index"
                                  v-text="thirdaryMenu.title"></el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </div>
            </div>
          </el-submenu>
        </div>
        <div v-else>
          <el-menu-item :index="menu.index">
            <i :class="menu.icon"></i>
            <span v-text="menu.title"></span>
          </el-menu-item>
        </div>
      </div>
    </el-menu>
  </div>

</template>


<script>
import {mapMutations} from 'vuex'

export default {
  // props: {
  //     showMore: Boolean
  // },
  data() {
    return {
      // activeIndex: '/',
      // navList: [
      //     { name: '/set', navItem: '用户管理' },
      //     { name: '/order', navItem: '订单管理' },

      // ],
    };
  },
  // mounted() {
  //     this.activeIndex = sessionStorage.getItem('keyPath') || '/set';
  // },
  // watch: {
  //     activeIndex(newValue) {
  //         if (newValue != this.$route.path) {
  //             this.activeIndex = this.$route.path;
  //         }
  //     }
  // },
  computed: {
    menuList() {
      return this.$store.state.menuList
    },
    activeNav() {
      return this.$store.state.activeNav
    }
  },
  methods: {
    // handleOpen(key, keyPath) {
    //     console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //     console.log(key, keyPath);
    // },
    // gotoRoute(name) {
    //     this.$router.push({ name }) // push(path)  push({name:''})
    // }
    ...mapMutations(['add_tab']),
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      this.add_tab(key)
    },
  }
}
</script>

<style>
.el-menu {
  /* height: calc(100vh - 80px); */
}

/* .el-menu-vertical-demo,
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: calc(100vh - 80px);
} */
</style>